<template>
	<view class="">
		<view class="view-top">
			<view class="view-center" style="justify-content: center;" v-if="role=='1'|| role=='2'">
				<view @click="clickTagTabs(1)">
					<view :class="tagTab==1?'tagTab-tv':'tagTab-tv2'">案件列表</view>
					<view style="width: 130rpx;display: flex;align-items: center;justify-content: center;">
						<view :class="tagTab==1?'line-tv':'line-tv2'"></view>
					</view>

				</view>
				<view style="margin-left: 96rpx;" @click="clickTagTabs(2)">
					<view :class="tagTab==2?'tagTab-tv':'tagTab-tv2'">案件处理</view>
					<view style="width: 130rpx;display: flex;align-items: center;justify-content: center;">
						<view :class="tagTab==2?'line-tv':'line-tv2'"></view>
					</view>

				</view>
			</view>

			<view style="display: flex;align-items: center;height: 88rpx;background-color: #f7f7f7;">
				<text class="ttext0" style="margin-left: 32rpx;">案件列表</text>

				<view style="display: flex;align-items: center;margin-left: auto;margin-right: 32rpx;">
					<view style="display: flex;align-items: center;" @click="sort">
						<text class="ttext1" style="margin-left: 32rpx;">排序</text>
						<image src="../../../../static/arrow_down.png"
							style="width: 32rpx;height: 32rpx;margin-left: 4rpx;"></image>

					</view>

					<view style="display: flex;align-items: center;margin-left: 64rpx;" @click="sift">
						<text class="ttext1" style="margin-left: 32rpx;">筛选</text>
						<image src="../../../../static/select.png"
							style="width: 32rpx;height: 32rpx;margin-left: 4rpx;"></image>
					</view>

				</view>

			</view>

		</view>

		<view :style="{marginBottom:marginBottom,marginTop:marginTop}"  v-if="caseListData.length>0">
			<case-list :caseListData="caseListData" :role="role" :tagTab="tagTab" ></case-list>
		
		</view>
		
		<view v-if="caseListData.length==0">
			<view style="height: 216rpx;">
			</view>
			<view  style="display: flex;align-items: center;justify-content: center;">
				<image :src="no_case" style="width: 300rpx;height: 300rpx;"></image>
			</view>
			<view style="display: flex;align-items: center;justify-content: center;">
				<text class="desc11">暂无案件</text>
			</view>
		</view>

		<common-choose v-if="showSort" :chooseList="sortList" :chooseResult="sortResult" :chooseTag="chooseTag"
			@gotIt="gotIt"></common-choose>


		<view class="zhezhao" v-if="showSift">

			<view class="view-bottom">
				<scroll-view scroll-y="true" style="height: 644rpx;">
					<view class="title-view" v-if="siftFieldList.length>0">
						咨询领域
					</view>
					<view class="sift-listview">
						<view v-for="(item,index) in siftFieldList" :key="index"
							:class="item.sel ? 'sift-item-foucs':'sift-item'" @click="sfitField(index)">
							{{item.name}}
						</view>
					</view>
					<view class="title-view" v-if="siftStatusList.length>0">
						案件状态
					</view>
					<view class="sift-listview">
						<view v-for="(item,index) in siftStatusList" :key="index"
							:class="item.sel ? 'sift-item-foucs':'sift-item'" @click="siftStatus(index)">
							{{item.name}}
						</view>
					</view>

					<view class="title-view" v-if="siftHopeList.length>0">
						希望我们
					</view>
					<view class="sift-listview">
						<view v-for="(item,index) in siftHopeList" :key="index"
							:class="item.sel ? 'sift-item-foucs':'sift-item'" @click="siftHope(index)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>

				<view class="view-bottom-s">
					<view class="view-bottom-c" @click="cancelSift">
						重置
					</view>
					<view class="view-bottom-b" @click="goSift">
						确定
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	let app = ""
	import caseList from '../../common/caseList.vue'
	import commonChoose from '../../common/commonChoose.vue'
	export default {
		components: {
			caseList,
			commonChoose
		},
		data() {
			return {
				role: '',
				tagTab: 1, // 1 案件列表  2 案件处理
				needAdapt: false,
				windowHeight: 0,
				marginBottom: 0,
				marginTop:0,
				caseListData: [],

				//排序
				showSort: false,
				sortResult: '全部',
				sortResultId: '2',
				chooseTag: 'sort',
				sortList: [
					// {
					// 	id: '1',
					// 	value: '全部',
					// 	name:'全部'
					// },
					{
						id: '2',
						value: '按更新时间排序',
						name:'按更新时间排序'
					},
					{
						id: '3',
						value: '按创建时间排序',
						name:'按创建时间排序'
					}
				],
				//以上为排序
				//以下为筛选
				showSift: false,
				siftFieldList: [ //领域
				],
				domainDict:'',
				
				siftStatusList: [ //状态
				],
				siftStatusListCopy: [ //状态
				],
				status:'',
				siftHopeList: [ //希望我们
				],
				hopeDict:'',
				
				no_case:getApp().globalData.baseImageUrl+'/no_case.png',
			}
		},
		onLoad() {
			console.log('manage-home-onLoad')

		},
		onShow() {
			console.log('manage-home-onShow')
		},
		mounted() {
			console.log('manage-home-mounted')
			let _this = this
			app = getApp()
			_this.role = app.globalData.role
			_this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			console.log(_this.needAdapt)
			if (_this.needAdapt) {
				_this.marginBottom = 180 + "rpx"
			} else {
				_this.marginBottom = 110 + "rpx"

			}
			if(_this.role=='1' || _this.role=='2'){
				_this.marginTop = '176rpx'
			}else if(_this.role=='3' || _this.role=='4'){
				_this.marginTop = '88rpx'
			}
			
			_this.initDatas()
			_this.$EventBus.$on('refresh', function(){
				_this.caseListData = []
				_this.getCaseList()
			});
			

		},
		onReachBottom() {
			console.log('到底')
		},
		methods: {
			
			initDatas(){
				let _this = this
				console.log('----')
				_this.getCaseList()
					
				//获取咨询领域
				_this.getConsult_domain()
				//获取案件状态
				_this.getCase_status()
				//获取希望我们
				_this.getConsult_hope()
			},
			//咨询领域
			async getConsult_domain(){
				let _this = this
				const res = await _this.$myRequest({
					url: "/comm/dict/list/param_consult_domain",
				})
				console.log('咨询领域',res)
				if(res.data.code==200){
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						list[i]['sel'] = false
					}
					_this.siftFieldList = list
				}
			},
			//案件状态
			async getCase_status(){
				let _this = this
				const res = await _this.$myRequest({
					url: "/comm/dict/list/param_case_status",
				})
				console.log('案件状态',res)
				if(res.data.code==200){
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						list[i]['sel'] = false
					}
					_this.siftStatusList = list
					_this.siftStatusListCopy = list
					
				}
			},
			//希望我们
			async getConsult_hope(){
				let _this = this
				const res = await _this.$myRequest({
					url: "/comm/dict/list/param_consult_hope",
				})
				console.log('希望我们',res)
				if(res.data.code==200){
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						list[i]['sel'] = false
					}
					_this.siftHopeList = list
					
				}
			},
			/**
			 * 查询列表
			 */
			async getCaseList(){
				let _this = this
			
				let parmas={
					"page":1,
					"size":1000,
				}
				
				if(_this.sortResultId==2){
					parmas.desc = 'editTime'
				}else if(_this.sortResultId==3){
					parmas.desc = 'createTime'
				}
				
				if(_this.domainDict!=''){
					if(_this.domainDict.indexOf(',')>-1){
						parmas.domainDict = 'in:'+ _this.domainDict
					}else{
						parmas.domainDict = _this.domainDict
					}
				}
				if(_this.hopeDict!=''){
					if(_this.hopeDict.indexOf(',')>-1){
						parmas.hopeDict = 'in:'+ _this.hopeDict
					}else{
						parmas.hopeDict =  _this.hopeDict
					}
				}
				if(_this.status!=''){
					if(_this.status.indexOf(',')>-1){
						parmas.status = 'in:'+ _this.status
					}else{
						parmas.status =  _this.status
					}
				}
				
				console.log('请求参数',parmas)
				
				
				
				let url = ''
				if(_this.role=='1' || _this.role=='2'){
					url = '/admin/case/list'
				}else if(_this.role=='3'|| _this.role=='4'){
					url = '/biz/case/list'
				}
				if(_this.tagTab===1){
					url = url+'/0'
				}else if(_this.tagTab===2){
					url = url+'/1'
				}
				
				uni.showLoading({
					title:'正在加载数据...'
				})
		
				const res = await _this.$myRequest({
					url: url,
					data: parmas,
					method:'POST',//默认是GET
				})
				uni.hideLoading()
				console.log('案件列表',res)
				if(res.data.code==200){
					let list = res.data.data.list
					for (var i = 0; i < list.length; i++) {
						let content = list[i]['content']
						if(content.length>15){
							content = content.substring(0,14)+'...'
						}
						list[i]['content'] = content
					}
					_this.caseListData = list
				}
			},
			clickTagTabs(val) {
				this.tagTab = val
				this.siftStatusList = []
				if(this.tagTab===1){
					
					this.siftStatusList = this.siftStatusListCopy.map((obj,index) => {
					    return obj;
					})
				}else if(this.tagTab===2){
					this.siftStatusList=[
						{
							name: "待审核",
							value:'待审核',
							sel: false,
							id:'1',
						},
						{
							name: "待分配",
							sel: false,
							value:'待分配',
							id:'2',
						}
					]
				}
				this.caseListData = []
				this.getCaseList()
				
			},
			/**
			 * 排序
			 */
			sort() {
				this.$nextTick(() => {
					this.showSort = true
				})
			},
			sift() {
				this.showSift = true
			},
			
			

			/**
			 * @param {Object} 咨询领域
			 */
			sfitField(index) {
				let _this = this
				_this.siftFieldList[index]['sel'] = !_this.siftFieldList[index]['sel']
			},
			/**
			 * @param {Object} 案件状态
			 */
			siftStatus(index) {
				let _this = this
				_this.siftStatusList[index]['sel'] = !_this.siftStatusList[index]['sel']
			},
			/**
			 * @param {Object} 希望我们
			 */
			siftHope(index) {
				let _this = this
				_this.siftHopeList[index]['sel'] = !_this.siftHopeList[index]['sel']
			},
			/**
			 * 获取排序结果
			 */
			gotIt(val) {
				// console.log(val)
				let _this = this
				_this.showSort = false
				let tag = val.split(";")[0]
				let index = val.split(";")[1]
				_this.sortResult = _this.sortList[index]['value']
				_this.sortResultId = _this.sortList[index]['id']
				console.log(_this.sortResult,_this.sortResultId)
				_this.caseListData = []
				_this.getCaseList()
			},

			/**
			 * 获取筛选结果
			 */
			goSift() {
				let _this = this
				_this.showSift = false
				
				//展示是用name，传后端筛选用value
				let domainDict = ''
				let hopeDict = ''
				let status = ''
				for (var i = 0; i < _this.siftFieldList.length; i++) {
					if (_this.siftFieldList[i]['sel']) {
						domainDict =_this.siftFieldList[i]['value'] +','+domainDict
					}
				}
				for (var i = 0; i < _this.siftStatusList.length; i++) {
					if (_this.siftStatusList[i]['sel']) {
					
						status =_this.siftStatusList[i]['value'] +','+status
					}
				}
				for (var i = 0; i < _this.siftHopeList.length; i++) {
					if (_this.siftHopeList[i]['sel']) {
						hopeDict =_this.siftHopeList[i]['value'] +','+hopeDict
					}
				}
				
				if(domainDict.length>1){
					domainDict = domainDict.substring(0,domainDict.length-1)
				}
				if(hopeDict.length>1){
					hopeDict = hopeDict.substring(0,hopeDict.length-1)
				}
				if(status.length>1){
					status = status.substring(0,status.length-1)
				}
				
				_this.domainDict = domainDict
				_this.hopeDict = hopeDict
				_this.status = status
				
				_this.caseListData = []
				
				
				_this.getCaseList()
				
				
				

			},

			/**
			 * 重置筛选
			 */
			cancelSift() {
				let _this = this
				for (var i = 0; i < _this.siftFieldList.length; i++) {
					_this.siftFieldList[i]['sel'] = false
				}
				for (var i = 0; i < _this.siftStatusList.length; i++) {
					_this.siftStatusList[i]['sel'] = false

				}
				for (var i = 0; i < _this.siftHopeList.length; i++) {
					_this.siftHopeList[i]['sel'] = false

				}
			},
		},
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.view-top {
		position: fixed;
		top: 0;
		width: 100%;
	}

	.view-center {
		height: 88rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.0600);
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}

	.line-tv {
		width: 80rpx;
		height: 4rpx;
		background: #2DA9C5;
		margin-top: 5rpx;
	}

	.line-tv2 {
		margin-top: 5rpx;
		width: 80rpx;
		height: 4rpx;
		background: #ffffff;
		margin-top: 5rpx;
	}

	.tagTab-tv {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}

	.tagTab-tv2 {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 400;
		color: #999999;
	}

	.ttext0 {
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}

	.ttext1 {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}


	.zhezhao {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9999;
		position: fixed;
		left: 0;
		top: 0;
		overflow: scroll;
		// padding-top: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.view-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-radius: 8px 8px 0px 0px;

	}

	.view-bottom-s {
		height: 108rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx #eeeeee solid;
		background-color: #ffffff;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}

	.view-bottom-c {
		width: 260rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #2DA9C5;
		margin-left: 32rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.view-bottom-b {
		width: 394rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}

	.title-view {
		height: 114rpx;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}

	.sift-listview {
		display: flex;
		flex-wrap: wrap;
	}

	.sift-item {
		width: 212rpx;
		height: 72rpx;
		background: #F7F7F7;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 400;
		color: #18252C;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 26rpx;
		margin-bottom: 32rpx;
	}

	.sift-item-foucs {
		width: 212rpx;
		height: 72rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 26rpx;
		margin-bottom: 32rpx;
	}
	
	.desc11{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
</style>
